<!--
 * @description 瀑布流列表组件
 * @author cuiliuhao
 * @date 2023/3/17
 -->
<template>
  <div
    class="exhibit_waterfall_courseListComp_page"
    :style="{
      'padding-top':top
    }"
  >
    <!-- 此处写div的目的是在页面配置中，点击预览后再关闭预览，导致真实的瀑布流效果有样式问题。故在真实预览之前先展示静态瀑布流，预览时再展示真实瀑布流以避免真实瀑布流样式问题 -->
    <div v-if="option.isWaterfall && !isInitData" class="exhibit_fake">
      <div class="exhibit_content">
        <div v-for="item in list" :key="item.id" class="exhibit_content_left">
          <div class="exhibit_title">
            <div
              :style="{
                'color': contentTitleColor
              }"
            >{{ item.courseName }}</div>
            <div
              class="courseIntroduce_top"
              :style="{
                'color': SubtitleColor
              }"
            >{{ item.courseIntroduce }}</div>
          </div>
        </div>
      </div>
      <div class="exhibit_content content_right">
        <div v-for="item in list" :key="item.id" class="exhibit_content_right">
          <div class="exhibit_title">
            <div
              :style="{
                'color': contentTitleColor
              }"
            >{{ item.courseName }}</div>
            <div
              class="courseIntroduce_top"
              :style="{
                'color': SubtitleColor
              }"
            >{{ item.courseIntroduce }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 静态瀑布流效果结束 -->
    <van-list
      v-if="option.isWaterfall && isInitData"
      v-model="loading"
      :finished="finished"
      :finished-text="finishedText"
      :immediate-check="false"
      :offset="20"
      @load="onLoad"
    >
      <div
        v-masonry
        transition-duration="0s"
        class="masonry-list-box"
        item-selector=".exhibit_waterfall_box_item"
        :fit-width="false"
        :gutter="6"
      >
        <div
          v-for="(item, index) in list"
          v-if="index < exhibitNum"
          :key="index"
          v-masonry-tile
          class="exhibit_waterfall_box_item"
          @click="toDetail(item)"
        >
          <div class="item-img">
            <van-image :src="item.courseImgUrl" :fit="option.fit">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img src="../../../images/base/error-icon.png" alt>
              </template>
            </van-image>
          </div>
          <div class="item-bottom">
            <div class="item-title">
              <span
                :style="{
                  'color': contentTitleColor
                }"
              >{{ item.courseName }}</span>
            </div>
            <div class="item-desc">
              <span
                :style="{
                  'color': SubtitleColor
                }"
              >{{ item.courseIntroduce }}</span>
            </div>
            <!-- <div class="item-number">
                 <span>浏览人次：{{item.pageview || 0}}</span>
                </div> -->
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import mixins from './../../mixins'
// import defImg from '../../images/answerRank/answer_cbg1.png'
export default {
  name: 'ExhibitRegular',
  mixins: [mixins],
  // inject: ['footerHeight'],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      list: [], // 列表数据
      page: 1,
      pageSize: 10
    }
  },
  computed: {
    isWaterfall() {
      console.log()
      return this.option.isWaterfall || true
    },
    // 标题颜色
    contentTitleColor() {
      return this.option.contentTitleColor
    },
    // 副标题颜色
    SubtitleColor() {
      return this.option.SubtitleColor
    },
    // 展示数量
    exhibitNum() {
      return this.option.exhibitNum || 10
    }
  },
  async created() {
    console.log(this, 121)
    if (this.isInitData) {
      this.finished = true
      this.list = [
        {
          id: 'da9f5c22-67f3-46b6-b7c7-3d69ea754256',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 210,
          courseImgUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          learnNum: 11,
          bid: '1'
        },
        {
          id: '6baeac8b-8502-4b81-9d4b-de537c378ffc',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 111,
          courseImgUrl: 'https://i.postimg.cc/4dm1snPB/220408b66e5b6a94e64e5a88d2e1379f1d6e0f.jpg',
          learnNum: 18,
          bid: '1'
        },
        {
          id: 'f08e45c2-552b-48f7-ac4f-2340dd68089b',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 79,
          courseImgUrl: 'https://i.postimg.cc/KcQmdzVd/2212233c5030d82f2b4c3eb499a80c3aefa739.png',
          learnNum: 8,
          bid: '1'
        },
        {
          id: '0e821f88-60d3-4272-8077-8dc71f8a1141',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 58,
          courseImgUrl: 'https://i.postimg.cc/3rfPXDzJ/20140514080629631.jpg',
          learnNum: 15,
          bid: '1'
        },
        {
          id: '0e821f88-60d3-4272-8077-8dc7843658a1141',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 58,
          courseImgUrl: 'https://i.postimg.cc/3rfPXDzJ/20140514080629631.jpg',
          learnNum: 15,
          bid: '1'
        }
      ]
    } else {
      this.finished = true
      this.list = [
        {
          id: 'da9f5c22-67f3-46b6-b7c7-3d69ea754256',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 210,
          courseImgUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          learnNum: 11,
          bid: '1'
        },
        {
          id: '6baeac8b-8502-4b81-9d4b-de537c378ffc',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 111,
          courseImgUrl: 'https://i.postimg.cc/4dm1snPB/220408b66e5b6a94e64e5a88d2e1379f1d6e0f.jpg',
          learnNum: 18,
          bid: '1'
        },
        {
          id: 'f08e45c2-552b-48f7-ac4f-2340dd68089b',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 79,
          courseImgUrl: 'https://i.postimg.cc/KcQmdzVd/2212233c5030d82f2b4c3eb499a80c3aefa739.png',
          learnNum: 8,
          bid: '1'
        },
        {
          id: '0e821f88-60d3-4272-8077-8dc71f8a1141',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 58,
          courseImgUrl: 'https://i.postimg.cc/3rfPXDzJ/20140514080629631.jpg',
          learnNum: 15,
          bid: '1'
        },
        {
          id: '0e821f88-60d3-4272-8077-8dc7843658a1141',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 58,
          courseImgUrl: 'https://i.postimg.cc/3rfPXDzJ/20140514080629631.jpg',
          learnNum: 15,
          bid: '1'
        }
      ]
    }
  },
  methods: {
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      this.loading = false
      this.isLoading = false
      this.finished = false
      if (result !== 'error') {
        const { dataList4platform, dataList4company } = result
        const res = dataList4platform || dataList4company
        const { rows, total } = res.data || {}
        this.list.push(...rows)
        this.isNoData = total < 1
        if (this.isNoData) {
          this.finishedText = ''
        } else {
          this.finishedText = '已经到底了'
        }
        if (this.list.length >= total) {
          this.finished = true
        } else {
          this.finished = false
        }
      }
    },

    /**
     * 加载数据
     */
    // async seflLoadData() {
    //   this.type = this.newest
    //     ? 'zuixin'
    //     : this.hot
    //       ? 'zuire'
    //       : this.courseClassify === ''
    //         ? 'zuire'
    //         : ''
    //   this.active === 0
    //     ? await this.getDataByCode('dataList4platform')
    //     : await this.getDataByCode('dataList4company')
    // },

    /**
     * 刷新
     */
    refresh4other() {
      return new Promise((sesolve, reject) => {
        this.finished = true
        this.page = 1
        this.list = []
        // this.seflLoadData()
        return new Promise(() => {
        })
      })
    },

    /**
     * 上拉加载
     */
    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        // this.seflLoadData()
      } else {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.exhibit_waterfall_courseListComp_page {
  position: relative;
  width: rem(750);
  padding: 0 rem(24);
  .exhibit_waterfall_box_item {
    // width: rem(342);
    // height: rem(300);
    background: #ffffff;
    border-radius: rem(12);
    margin-bottom: rem(20);
    // padding-bottom: rem(20);
    // position: relative;
    background-color: #999999;
    line-height: 0;
    .item-img {
      width: rem(342);
      min-height: rem(180);
      margin: 0 auto;
      position: relative;
      border-radius: rem(12);
      /* img {
          position: relative;
          height: 100%;
          width: 100%;
          border-radius: rem(16) rem(16) 0 0;
        }*/
      .van-image {
        width: 100%;
      //   height: 100%;
        border-radius: rem(12);
        overflow: hidden;
        .van-image__img {
          border-radius: rem(12);
        }

        .van-image__error {
          border-radius: rem(12);

          img {
            width: rem(120);
            height: rem(120);
          }
        }
      }
    }

    .item-bottom {
      margin-left: rem(15);
      position: absolute;
      bottom: rem(10);
      left: rem(15);
      .item-title {
        line-height: 1.5;
        font-size: rem(30);
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: bold;
        text-align: left;
        color: #333333;
        margin-top: rem(15);
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }

      .item-desc {
        line-height: normal;
        font-size: rem(24);
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
        margin-top: rem(15);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .item-number {
        font-size: rem(24);
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
        margin-top: rem(15);
      }
    }
  }

  .exhibit_fake {
    width: 100%;
    display: flex;
    .exhibit_content {
      // flex: 1;
      width: 50%;
      .exhibit_content_left,.exhibit_content_right {
        border-radius: rem(15);
        display: flex;
        margin-top: rem(15);
        width: 100%;
        // height: rem(180);
        background-color: #999999;
        .exhibit_title {
          width: 100%;
          font-size: rem(30);
          align-self: flex-end;
          margin-bottom: rem(15);
          margin-left: rem(15);
          .courseIntroduce_top {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: rem(15);
          }
        }
      }
      .exhibit_content_left {
        height: rem(180);
      }
      .exhibit_content_right {
        height: rem(160);
      }
    }
    .content_right {
        margin-left: rem(10);
      }
  }
}

</style>
